<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>内置指令</title>
        <style>
        </style>
    </head>
    <div>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first" v-cloak>
            <p>
                <input v-bind:type="inputType" placeholder="请输入密码" v-model="passwd">
                <button v-on:click="toggle">{{buttonText}}</button>
            </p>
            <p>
                <input :type="inputType" placeholder="请输入密码" v-model="passwd">
                <button @click="toggle">{{buttonText}}</button>
            </p>
        </div>

        <a href="https://cn.vuejs.org/api/built-in-directives.html#v-bind">vue.js API: 内置指令(v-bind)</a>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        buttonText: '隐藏密码',
                        inputType: 'text',
                        passwd: ''
                    }
                },
                methods: {
                    toggle() {
                        if( this.inputType === 'text' ) {
                            this.inputType = 'password';
                            this.buttonText = '显示密码';
                            return;
                        }

                        this.inputType = 'text';
                        this.buttonText = '隐藏密码';
                    }
                }
            }

            Vue.createApp(options).mount( '#first' );
        </script>
    </div>
</html>